<template>
    <view class="bank">
        <ul>
            <li class="row between" @click.stop="handleSheet">
                <text>{{
                    !info.bank_name ? $t("select.bank.name") : info.bank_name
                }}</text>
                <u-icon name="arrow-right" size="16"></u-icon>
            </li>
            <li>
                <input
                    type="text"
                    v-model="info.account_name"
                    :placeholder="$t('account.name')"
                />
            </li>
            <li>
                <input
                    type="text"
                    v-model="info.account_number"
                    :placeholder="$t('account.number')"
                />
            </li>
        </ul>
        <button @click.stop="handleSubmit">
            {{ $t("submit.submitButton") }}
        </button>
        <u-action-sheet
            :actions="sheetList"
            :show="show"
            @select="selectClick"
        ></u-action-sheet>
    </view>
</template>

<script>
import { getMyBank, getBankList, updateBankAccount } from "@/lib/service";
import { showFailure } from "@/lib/helper";
export default {
    data() {
        return {
            info: {
                bank_name: "",
                account_name: "",
                account_number: "",
            },
            sheetList: [],
            show: false,
        };
    },
    onLoad() {
        this.myInfo();
        this.getBank();
    },
    methods: {
        myInfo() {
            getMyBank().then((res) => {
                this.info = res.data || {
                    bank_name: "",
                    account_name: "",
                    account_number: "",
                };
            });
        },
        getBank() {
            let _this = this;
            getBankList().then((res) => {
                _this.sheetList = res.data.list || [];
            });
        },
        handleSheet() {
            this.show = true;
        },
        selectClick(e) {
            this.info.bank_name = e.text;
            this.show = false;
        },
        handleSubmit() {
            if (!this.info.bank_name) {
                uni.showToast({
                    title: this.$t("select.bank.name"),
                    icon: "none",
                });
                return;
            }
            if (!this.info.account_name) {
                uni.showToast({
                    title: "Please enter the account name",
                    icon: "none",
                });
                return;
            }
            if (!this.info.account_number) {
                uni.showToast({
                    title: "Please enter the account number",
                    icon: "none",
                });
                return;
            }
            updateBankAccount(this.info)
                .then((res) => {
                    uni.showToast({
                        title: "success",
                        icon: "none",
                    });
                    setTimeout(() => {
                        uni.redirectTo({
                            url: "./bankAccount",
                        });
                    }, 1500);
                })
                .catch((err) => {
                    showFailure();
                });
        },
    },
};
</script>

<style lang="scss" scoped>
.bank {
    margin: 30rpx;
    ul {
        background: #ffffff;
        box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(47, 60, 111, 0.06);
        border-radius: 20rpx;
        padding: 40rpx 20rpx;
        li:first-child {
            margin-top: 0;
        }
        li {
            height: 80rpx;
            background: #f9f9f9;
            border-radius: 10rpx;
            margin-top: 20rpx;
            padding: 0 30rpx;
            input {
                height: 80rpx;
                line-height: 80rpx;
            }
        }
    }
    button {
        width: 684rpx;
        height: 90rpx;
        background: #036efc;
        border-radius: 45rpx;
        margin-top: 60rpx;
        color: #ffffff;
        font-size: 36rpx;
        line-height: 90rpx;
        text-align: center;
    }
}
</style>
